{extend name='layout/app' /}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/pwd-update.css">
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>修改电话号码</div>
        <i class="iconfont icon-home icon_right" @click="home"></i>
    </div>

    <div class="init-info">
        <div class="inner-cont-wrapper">
            <div class="avatar"><img src='{$Think.session.user.image}' alt="" style="border-radius: 50%"></div>
            <!-- <div class="inner-cont">
                <div class="nickname"></div>
                <div class="phone">158****2185</div>
            </div> -->
        </div>
    </div>

    <div class="reg-area">

        <div class="reg-item">
            <el-input
                    prefix-icon="iconfont icon-phone"
                    v-model="oldphone"  id="phone" disabled>
            </el-input>
<!--            <div class="tips"></div>-->
        </div>

        <div class="reg-item">
            <el-input
                    type="password"
                    placeholder="请输入登录密码"
                    prefix-icon="iconfont icon-lock"
                    v-model="password" clearable id="password">
            </el-input>
            <div class="tips"></div>
        </div>

        <div class="reg-item">
            <el-input
                    placeholder="请输入新手机号码"
                    prefix-icon="iconfont icon-phone"
                    v-model="phone" clearable id="phone">
            </el-input>
            <div class="tips"></div>
        </div>

        <div class="reg-item captcha-item">
            <el-input
                    placeholder="请输入验证码"
                    prefix-icon="iconfont icon-securityCode-b"
                    v-model="captcha" clearable id="captcha">
            </el-input>
            <el-button type="plain" @click="getCaptcha" class="get-captcha">获取验证码</el-button>
            <div class="tips"></div>
        </div>
    </div>


    <div class="btn-area">
        <div class="order">
            <el-button type="primary" round @click="btnReg">确认修改</el-button>
        </div>
    </div>
</div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script src="/static/layer/layer.js"></script>
<script>
    var that

    new Vue({
        el:'#app',
        data: {
            phone: '',
            oldphone: '{$Think.session.user.phone|substr=0,3}****{$Think.session.user.phone|substr=-4,4}',
            captcha: '',
            password: '',
            codeStatus: true
        },
        mounted() {
            that = this  //生成vue副本
            $('#password').blur(function () {
                // var filter = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
                if(!$(this).val()) {
                    $(this).parent().siblings('.tips').text('请输入密码')
                }
            })
            $("#password").focus(function(){
                $(this).parent().siblings('.tips').text('')
            });
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            getCaptcha() {
                var telCheck = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
                if(!this.phone) {
                    $('#phone').parents('.reg-item').find('.tips').html('请输入新手机号')
                    return
                }
                if(!telCheck.test(this.phone)) {
                    $('#phone').parents('.reg-item').find('.tips').html('请输入正确的手机号')
                    return
                }
                if(!this.codeStatus) {
                    return
                }
                $('#phone').parents('.reg-item').find('.tips').html('')
                $.post('/api/sms/getCaptcha',{phone:this.phone},function (res) {
                    console.log(1)
                    if(res.code === 0) {
                        that.codeStatus = false
                        var time = 60
                        var t = setInterval(function () {
                            time--
                            $('.get-captcha').html(time+'s')
                            if(time === 0) {
                                clearInterval(t)
                                $('.get-captcha').html('重新获取')
                                that.codeStatus = true
                            }
                        },1000)
                    }
                },'json')
            },
            btnReg() {
                var errorCount = 0
                $('.reg-item input').each(function (i,v) {
                    if(!v.value) {
                        alert('请填写修改内容！')
                        return false
                    }
                })
                $('.tips').each(function (i,v) {
                    if(v.innerText) {
                        errorCount++
                    }
                })
                if(errorCount > 0) {
                    this.$message.error('请确认输入内容')
                    return
                }
                $.post('/index/person/updateaccount',{
                    password: this.password,
                    phone: this.phone,
                    captcha: this.captcha
                },function (res) {
                    // console.log(res)
                    if(res.code === 0){
                        that.$message.success('修改成功')
                        location.href = 'personInfo.html'
                    }else{
                        layer.alert(res.msg);
                    }
                },'json')
            }
        }
    });
</script>
{/block}